<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基金净值监控</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/echarts.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .container { max-width: 600px; }
        input, button { padding: 10px; margin: 10px 0; font-size: 16px; }
        button { background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin-top: 20px; padding: 15px; border: 1px solid #ddd; background: #f8f9fa; }
        .error { color: red; }
        .success { color: green; }
    </style>

    <script>
        function crawlFundAll() {
            document.getElementById('fundCode').value='000000';
            crawlFund();
        }
        function crawlFund() {
            const fundCode = document.getElementById('fundCode').value.trim();
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '';
            resultDiv.className = '';

            if (!/^\d{6}$/.test(fundCode)) {
                resultDiv.innerHTML = '❌ 请输入正确的6位基金代码';
                resultDiv.className = 'error';
                return;
            }

            resultDiv.innerHTML = '🔄 正在请求爬取基金 ' + fundCode + ' ...';

            fetch('/api/fund/crawl/'+fundCode, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = '❌ ' + data.error;
                    resultDiv.className = 'error';
                } else {
                    resultDiv.innerHTML = '✅ ' + data.message;
                    resultDiv.className = 'success';
                }
            })
            .catch(err => {
                resultDiv.innerHTML = '❌ 请求失败: ' + (err.message || '网络错误');
                resultDiv.className = 'error';
            });
        }

        function crawlAllStockBoard() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '';
            resultDiv.className = '';

            resultDiv.innerHTML = '🔄 正在请求爬取股票板块 ...';

            fetch('/api/boards/crawlAllStockBoard', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = '❌ ' + data.error;
                    resultDiv.className = 'error';
                } else {
                    resultDiv.innerHTML = '✅ ' + data.message;
                    resultDiv.className = 'success';
                }
            })
            .catch(err => {
                resultDiv.innerHTML = '❌ 请求失败: ' + (err.message || '网络错误');
                resultDiv.className = 'error';
            });
        }



    </script>
</head>
<body>
<div class="container">
    <h1>基金历史净值爬取</h1>
    <p>输入6位基金代码，爬取所有历史净值数据</p>

    <input type="text" id="fundCode" placeholder="请输入6位基金代码，如：004744" maxlength="6"/>
    <button onclick="crawlFund()">开始爬取</button>
    &nbsp;
    <button onclick="crawlFundAll()">爬取全部</button>

    <div class="mt-3">
        <a href="/query.html" class="btn btn-info">query页</a>
        <a href="/fundValuation" class="btn btn-info">fundValuation页</a>
        <a href="/allValuationStats" class="btn btn-info">allValuationStats页</a>
    </div>

    <button onclick="crawlAllStockBoard()">爬取全部股票板块</button>
    <div id="result"></div>


</div>
<div class="container mt-4">
    <h1>📊 基金净值监控系统</h1>
    <p th:text="'更新时间: ' + ${T(java.time.LocalDateTime).now()}"></p>

    <div class="alert alert-info">
        <strong>数据统计:</strong>
        共 <span th:text="${dataSummary.totalFunds}"></span> 只基金，
        <span th:text="${dataSummary.totalRecords}"></span> 条记录
    </div>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>基金码</th><th>基金名称</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="fundConfig : ${fundList}">
            <td th:text="${fundConfig.paramGroup}"></td>
            <td th:text="${fundConfig.paramValue}"></td>
        </tr>
        </tbody>
    </table>

</body>
</html>
